<template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 -->
    <li class="completed" >
      <div class="view">
        <input  class="toggle" type="checkbox"  :checked="todo.done" @change="handleChange(todo.id)" />
        <label>{{todo.name}}</label>
        <button @click="handleClick(todo.id)" class="destroy" ></button>
      </div>
    </li>
  </ul>
  
</template>

<script>
import {mapMutations} from "vuex";
export default {
    name:"Item",
    props:["todo"],
    methods:{
        ...mapMutations({
            handleChange:"cheaktodo"
        }),
        handleClick(id){
          this.$store.commit("deltodo",id);
        }
    }
}
</script>
<style>
.fontadd{
  text-decoration:none;
}
</style>